<template>
  <div>
    <h2>测试题</h2>

    <div class="subject" v-for="(item, index) in arr" :key="index">
      <span>{{ item.num1 }}</span>

      <span>+</span>

      <span>{{ item.num2 }}</span>

      <span>=</span>

      <input type="number" v-model="item.result" />

      <button @click.prevent="sum(index)" :disabled="item.submitted">
        提交
      </button>
    </div>

    <br />

    <div>
      <span
        v-for="(item, ind) in arr"
        :key="ind"
        :class="{
          right: item.status === '正确',
          error: item.status === '错误',
          undo: item.status === '未完成',
        }"
        >{{ ind + 1 }}: {{ item.status }}</span
      >
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      arr: [
        {
          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: "未完成",

          result: "",

          submitted: false,
        },
        {
          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: "未完成",

          result: "",

          submitted: false,
        },
        {
          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: "未完成",

          result: "",

          submitted: false,
        },
        {
          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: "未完成",

          result: "",

          submitted: false,
        },
        {
          num1: Math.floor(Math.random() * 10),

          num2: Math.floor(Math.random() * 10),

          status: "未完成",

          result: "",

          submitted: false,
        },
      ],
    };
  },

  methods: {
    sum(index) {
      if (this.arr[index].result == "") {
        return;
      }

      if (
        this.arr[index].result ==
        this.arr[index].num1 + this.arr[index].num2
      ) {
        this.arr[index].status = "正确";

        this.arr[index].submitted = true;
      } else {
        this.arr[index].status = "错误";
      }
    },
  },
};
</script>
  
  <style>
.subject {
  margin: 5px;

  padding: 5px;

  font-size: 20px;
}

.subject > span {
  display: inline-block;

  text-align: center;

  width: 20px;
}

.subject input {
  width: 50px;

  height: 20px;
}

.right {
  color: green;
}

.error {
  color: red;
}

.undo {
  color: #ccc;
}

body {
  background-color: #eee;
}

#app {
  background-color: #fff;

  width: 500px;

  margin: 50px auto;

  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

  padding: 2em;
}
</style>